<template>
    <view class="container">
        <view class="image-border">
            <image
                :src="product.mainImg"
            ></image>
        </view>
        <view class="product-name">
            <u-text
                :text="product.name"
                :lines="1"
                size="28rpx"
                color="#000000"
                align="center"
            ></u-text>
        </view>
        <view class="nft-tag" v-if="product.type != 'shop' && isShowTags=='1'"></view>
        <view class="product-spec">
            数量 x {{product.number}} {{product.specName? product.specName: ""}}
        </view>
    </view>
</template>
<script>
export default {
    name: "order-product",
    props: {
        product: {
            type: Object,
            default: () => {
                return {
                    mainImg: null,
                    name: null,
                    number: 0,
                    specName: null
                }
            }
        }
    },
    computed: {
        isShowTags() {
            return this.$store.getters.isShowTags
        }
    }
}
</script>

<style lang="scss" scoped>
    .container {
        box-sizing: border-box;
        .image-border {
            width: 233rpx;
            height: 233rpx;
            background: #FFFFFF;
            border-radius: 4px;
            border: 2px solid #000000;
            padding: 21rpx;
            margin: auto;
            image {
                display: block;
                width: 100%;
                height: 100%;

            }
        }
        .product-name {
            width: 353rpx;
            margin: 30rpx auto 18rpx auto;
        }
        .nft-tag {
            width: 100rpx;
            height: 40rpx;
            background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/967825cfb630bf72832c10b8d3ed3d64ad249bc8.png) no-repeat;
            background-size: 100% 100%;
            margin: auto;
        }
        .product-spec {
            margin: 27rpx auto 0 auto;
            text-align: center;
            color: #000000;
            font-size: 24rpx;
        }
    }
</style>
